<template>
    <div id="freeKan">
        <div v-if="quan"></div>
        <div v-else>
            <div class="kanBG">
                <div class="cutFree" v-if="cutType==3">
                    <div class="Profile-picture">
                        <div class="border"><img :src="userInfo.member_avatar" ></div>
                    </div>
                    <div class="pro-container" :id="sku_id" @click="goNewDetali()">
                        <div>
                            <img :src="proInfo.pro_img">
                        </div>
                        <div>
                            <p style="-webkit-box-orient: vertical;">{{proInfo.pro_title}}</p>
                            <p><span style="font-size:.24rem">￥</span><span><del style="font-size:.34rem;">{{proInfo.pro_price}}</del></span></p>
                        </div>
                    </div>
                    <!--进度条-->
                    <div class="schedule">
                        <div class="a">
                            <div class="b"  :style="{width:value + 'rem'}"></div>
                            <img class="left" src="http://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/cutFree/round_cuea.png">
                            <img class="right" src="http://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/cutFree/round_cueb.png">
                            <img src="http://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/cutFree/location_cut.png"  :style="{left:value + 'rem'}"  class="img">
                        </div>
                        <ul class="allM">
                            <li class="maxMoneys" style="margin-left: .5rem">￥{{proInfo.pro_price}}</li>
                            <li class="minMoneys" style="margin-right: .5rem">￥{{rdMoney}}</li>
                        </ul>
                    </div>
                    <!----------------------------->
                    <div class="countDown">
                        <p v-if="Number(showCutInfo.cutNum)!==0">已砍{{numKan}}刀,还差{{showCutInfo.cutNum}}人帮砍！</p>
                        <p v-else>恭喜！已砍到最低价￥{{showCutInfo.cutMoney}}</p>
                    </div>
                    <div class="beginkanContainer">
                        <a :class="y==0?'btnRed':'btnYellow'" v-for="(x,y) in cutBtn" :type="x.type" @click="cutPay($event)">{{x.btValue}}</a>
                    </div>
                    <div class="countDown">
                        <p>活动<span style="color:#9948c3;">{{timeCount|dateFrm}}</span>后结束</p>
                    </div>
                </div>
            </div>
            <!--未关注显示二维码-->
            <div class="contexts" v-if="showCutInfo.focusCode!=''" style="background: #fff;    margin-bottom: .2rem;">
                <p style="padding-bottom: 0;padding-top: .36rem;">关注砍好货,砍价金额更高</p>
                <img style="margin-left: 1.5rem;" :src="showCutInfo.focusCode">
                <img :src="showCutInfo.imgFinger">
            </div>
            <div>
                <div v-if="cutType==3" :class="showCutList==true?'cutList':'nopaMar'">
                    <div v-if="showCutList">
                        <div class="title">
                            <h3>砍价高手</h3>
                        </div>
                        <div v-for="x in cutZeroList" class="containersCutList">
                            <div class="containers" >
                                <span class="imgBox"><img :src="x.headImg"></span>
                                <div style="margin-left: .24rem;">
                                    <p>{{x.name}}使用了<span style="color:#9948c3;">{{x.weapon}}</span>帮砍了一刀</p>
                                    <p style="color: #969696;font-size: .26rem;">{{x.time}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ruleContainer">
                <div v-if="cutType==3">
                    <h2 style="text-align: center">活动规则</h2>
                    <p>1.邀请好友帮砍价，选择砍价金额和帮砍人数，活动时间为发起砍价后24小时，规定时间内，如达到帮砍人数，砍价订单成交，如未达到砍价人数，平台自动退款，砍价活动结束;</p>
                    <p>2.随心砍只限新用户帮砍，老用户砍价不计入砍价人数;</p>
                    <p>3.活动过程中，凡以不正当手段（包括但不限于作弊、虚假交易、扰乱系统、实施网络攻击等）参与活动的用户，砍好货商城有权终止其参与活动，并取消其获奖资格（如奖品已发放，砍好货商城有权追回）;</p>
                    <p>4.如遇不可抗力（包括但不限于政府指令、活动中存在大面积作弊行为、活动遭受严重网络攻击或系统故障致活动中奖名单大批量出错，活动不能正常进行的），砍好货商城可取消、修改或暂停本活动，砍好货商城可依相关法律法规主张免责;</p>
                    <p>5.砍好货商城拥有最终活动解释权。</p>
                </div>
            </div>
            <div class="templBg" v-if="showTem" @click="Bback"></div>
            <!------------点击弹出海报------------->
            <p v-if="handleShow" style="font-size: 0.28rem;width: 64%;color: #f7c52b;position: fixed;top: 1%;z-index: 9999;left: 18%;">您可长按图片保存，分享到朋友圈或微信群，邀请好友帮您砍价。</p>
            <div class="cutOne" style="position: fixed;top: 9%;left: 10%;border-radius: .2rem;z-index: 999;width: 6rem;height: 10.67rem;" v-if="handleShow">
                <img style="width: 6rem;height: 10.67rem;" :src="showCutInfo.shareCodeImg">
                <span @click="Bback" class="styleX"></span>
            </div>
            <!------------海报按钮------------->
            <div @click="handleClickShow" v-if="showCutInfo.shareCodeImg!=''" class="newPosi2">
                <span>砍价分享海报</span>
            </div>
            <!--未关注砍价完的二维码-->
            <div class="dialog" v-if="showTwo" >
                <div class="Profile-picture ">
                    <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/knife.png" >
                </div>
                <div class="content">
                    <p font-size=".34rem">砍价成功</p>
                    <p :style="guanzhuIn.tag==2?'':'margin-bottom: .4rem;'">使用<span style="color:#9948c3;">{{cutInfo.cut_weapon}}</span>帮砍了<span style="color:#9948c3;">{{cutInfo.cut_money}}</span>元，</p>
                </div>
                <div class="contexts" v-if="guanzhuIn.tag==2">
                    <img style="margin-left: .7rem;" :src="guanzhuIn.codeUrl">
                    <img :src="guanzhuIn.imgFinger">
                    <p>关注砍好货,砍价更高</p>
                </div>
            </div>
            <!--朋友打开帮砍成功弹框-->
            <div class="dialog" v-if="friendHelp" >
                <div class="Profile-picture ">
                    <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/knife.png" >
                </div>
                <div class="content">
                    <p font-size=".34rem">砍价成功</p>
                    <p :style="guanzhuIn.tag==2?'':'margin-bottom: .4rem;'">使用<span style="color:#9948c3;">{{cutInfo.cut_weapon}}</span>帮砍了<span style="color:#9948c3;">{{cutInfo.cut_money}}</span>元，</p>
                </div>
                <div class="contexts" v-if="guanzhuIn.tag==2">
                    <img style="margin-left: .7rem;" :src="guanzhuIn.codeUrl">
                    <!--<img style="margin-left: .7rem;" src="http://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/QRcode/khh_normal.png">-->
                    <img :src="guanzhuIn.imgFinger">
                    <p>关注砍好货,砍价更高</p>
                </div>
            </div>
            <div class="num" v-if="none&&cutType==3">
                <div style="margin-top:.6rem">
                    <p>邀请<span style="font-size:.44rem;color:#f7c52b;">{{showCutInfo.cutNum}}人</span>就可砍到<span style="font-size:.44rem;color:#f7c52b;">{{rdMoney}}</span>,</p>
                    <!--<p>点击<span style="font-size:.34rem;color:#f7c52b;">右上角</span>继续分享,</p>-->
                    <p>喊好友帮你砍价吧～</p>
                </div>
            </div>
            <!--一行字弹框-->
            <div class="newContext" v-if="test">
                <p>{{newContext}}</p>
            </div>
            <!--关闭符号-->
            <div class="styleX" v-if="showTems" @click="Bback">
                <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/close_b.png">
            </div>
            <!--逛逛商城-->
            <div class="newPosi" @click="goHome"><span>逛逛商城</span></div>
        </div>

    </div>

</template>

<script>
  import store from "../store/newStore.js";
  import config from "../config/config.js";
  import share from "../share/share.js";
  import MtaH5 from 'mta-h5-analysis';
  export default {
    data(){
      return{
        showTem:false,
        showTems:false,
        showDia:false,
        showTwo:false,
        showReabag:false,
        bagMoney:'',
        userInfo:{},
        proInfo:{},
        cutType:'',
        logic_type:'',
        one_box:{},
        two_box:{},
        cutBtn:[],
        cutRecord:{},
        none:false,
        guanzhu:true,
        showRule:true,
        KanMoney:false,
        guanzhuInfo:Object,
        timer:{},
        timerLoad:{},
        timeCount:null,
        lookMores:true,
        lookDown:false,
        cutZeroList:[],
        showCutList:true,
        detailsType:'',
        timeMsgType:'',
        sku_id:'',
        arrow:false,
        friendHelp:false,
        test:false,
        newContext:'',
        reces:true,
        fixId:'',
        btnType:'0',
        listSub:'',
        listMsg:'',
        couponList:[],
        btnTypes:'',
        cutInfo:'',
        guanzhuIn:'',
        showShow:false,
        showCutInfo:'',
        value: 0,
        pricemax:'',
        numKan:Boolean,
        rdMoney:'',
        handleShow:false,
        quan:false
      }
    },
    computed:{
      ticket(){
        return this.$store.state.getTicket;
      },
    },
    filters:{
      status:function(val){
        switch(val){
          case 'LOW_PRICE':
            return "底价";
          case 'NOW_PRICE':
            return "当前价";
        }
      },
      dateFrm:function(time){
        return formatSeconds(time)
      }
    },
    methods:{
      newrece(){
        this.btnType = '1';
      },
      handleClickShow(){
        this.handleShow = true;
        this.showTem = true;
      },
      goHome(){
        this.$router.push("/home/index/00");
      },
      handleDowns(){
        document.getElementsByClassName('cutList')[0].style.height=document.getElementsByClassName('containersCutList')[0].innerHeight*10+'px';
        localStorage.setItem('downheight',document.getElementsByClassName('cutList')[0].style.height);
        this.lookDown = false;
        this.lookMores = true;
      },
      handleMores(){
        var that=this;
        document.getElementsByClassName('cutList')[0].style.height=document.getElementsByClassName('containersCutList')[0].innerHeight*this.cutZeroList.length+'px';
        localStorage.setItem('height',document.getElementsByClassName('containersCutList')[0]);
        this.lookDown = true;
        this.lookMores = false;
      },
      Bback(){
        this.handleShow= false;
        this.none = false,
          this.showTem = false,
          this.showTems = false,
          this.guanzhu = false,
          this.showReabag = false,
          this.showDia = false,
          this.showTwo = false,
          this.KanMoney=false,
          this.arrow = false,
          this.friendHelp = false,
          this.test=false;
        if(this.showReabag==true){
          this.$router.push('/home/hot')
        }
      },
      getbtnType(fixId){
        var that=this;
        var value=JSON.stringify({"fix_id":fixId,"token":localStorage.getItem('token')}),
          key=demo(value);
        axios.post('/Home/coupon/GetMyFixCoupon',{
          value:value,
          key:key
        },config)
          .then(function(response) {
            that.code=response.data.code;
            //this.$store.commit('increment',response.data.ticket);
            if(response.data.code==200){
              that.newrece();
            }else{
              // alert(response.data.code);
            }
          })
      },
      doCut(obj){
        var that=this;
        var value=JSON.stringify({"shareid":obj.shareid,"bt_type":obj.bt_type,"cut_type":obj.cut_type,"token":localStorage.getItem('token')}),
          key=demo(value);
        axios.post('/Home/cut/CutButton',{
          value:value,
          key:key,
          ticket:that.ticket
        },config)
          .then(function(response) {
            this.code=response.data.code;
            this.$store.commit('increment',response.data.ticket);
            if(response.data.code==200){
              this.getCutInfo();
              this.cutInfo = response.data.data.cutInfo;
              this.guanzhuIn = response.data.data.focusInfo;
              if(response.data.data.cutInfo.hasMoney==0){
                if(this.logic_type=='C'||this.logic_type=='M'){
                  this.showDia=true;
                  this.showTem=true;
                  this.showTems = true;
                }else if(this.logic_type=='G'||this.logic_type=='H'){
                  this.showTwo=true;
                  this.showTem=true;
                  this.showTems = true;
                }else if(this.logic_type=='Q'||this.logic_type=='P'){
                  this.friendHelp=true;
                  this.showTem=true;
                  this.showTems = true;
                }
              }else{
                this.showReabag=true;
                this.showTem=true;
                this.showTems = true;
                this.bagMoney=response.data.data.cutInfo.hasMoney;
              }
            }else if(response.data.code==201){
              this.showTem=true;
              this.guanzhu=true;
              this.showTems = false;
              this.guanzhuInfo=response.data.data;
            }else{
              this.test = true;
              this.showTems = true;
              this.showTem = true;
              this.newContext = response.data.msg;;
            }
          }.bind(this))
          .catch(function (error) {
            console.log(error);
          });
      },
      cutPay($event){
        var that=this;
        var e=$event.currentTarget.getAttribute('type');
        var obj={
          shareid:this.$route.params.shareid,
          bt_type:e,
          cut_type:this.logic_type
        };
        if(e=='CUT'){
          this.doCut(obj);
        }else if(e=='SHARE'){
          //不请求
          if(this.cutType==1){
            this.showTem=true;
            this.KanMoney=true;
            this.arrow = true;
            this.showTems = true;
          }else{
            this.showTem=true;
            this.none=true;
            this.arrow = true;
            this.showTems = true;
          }

        }else if(e=='PAY'){
          that.orderpay(obj)
        }else if(e=='PUSH'){
          this.PushCut()
        }else if(e=='PAY_SHARE'){
          that.orderpay(obj)
        }else if(e=='JUMP_INDEX'){
          that.goHomeIndex()
        }else if(e=='JUMP_BOOK_ORDER'){
          this.$router.push("/allorder");
          sessionStorage.setItem("index",2);
        }else if(e=='JUMP_CUT_ZERO'){
          that.$router.push('/CutZero/CUT_TO_ZERO')
        }else if(e=='JUMP_ORDER'){
          that.router.push("./home/my")
        }

      },
      getCutInfo(){
        var that=this;
        var value=JSON.stringify({"shareid":this.$route.params.shareid,"token":localStorage.getItem('token')}),
          key=demo(value);
        axios.post('/Home/cut/ShowCutPage',{
          value:value,
          key:key,
          ticket:this.ticket
        },config)
          .then(function(response) {
            this.$store.commit('increment',response.data.ticket);
            if(response.data.code==200){
              that.quan = false;
              this.$nextTick(function () {
                var that = this;
                that.value = Number(5.2/(Number(that.showCutInfo.cutNum)+1))
                if (that.value > 5.2)
                  this.value =5.2
              });
              var link=this.$route.path;
              var newLink=link.replace(/\//g,'*');
              this.rdMoney = response.data.data.cutInfo.rdMoney;
              this.userInfo=response.data.data.userInfo;
              this.cutType=response.data.data.cutInfo.type;
              this.cutBtn=response.data.data.cutInfo.details.button;
              this.logic_type=response.data.data.cutInfo.logic_type;
              this.one_box=response.data.data.cutInfo.details.one_box;
              this.two_box=response.data.data.cutInfo.details.two_box;
              this.proInfo=response.data.data.proInfo;
              this.cutZeroList=response.data.data.cutRecord.data;
              this.numKan = (response.data.data.cutRecord.data).length;
              this.timeMsgType=response.data.data.cutInfo.timeMsg.msgType;
              this.timeCount=response.data.data.cutInfo.timeMsg.time;
              this.btnTypes=response.data.data.cutInfo.details.show_type;
              this.sku_type=response.data.data.proInfo.sku_type;
              this.details_id=response.data.data.proInfo.details_id;
              this.details_type=response.data.data.proInfo.details_type;
              this.showCutInfo = response.data.data.cutInfo;
              if(response.data.data.cutInfo.isJumpRandCut==1){
                this.$router.push("/cutFree/CUT_RANDOM");
              }
              if(response.data.data.cutInfo.details.coupon_info) {
                this.couponList=response.data.data.cutInfo.details.coupon_info.couponList;
                this.listMsg=response.data.data.cutInfo.details.coupon_info.couponMsg;
                this.listSub=response.data.data.cutInfo.details.coupon_info.subTitle;
                this.btnType=response.data.data.cutInfo.details.coupon_info.type;
                this.fixId=response.data.data.cutInfo.details.coupon_info.fix_id;
                //this.btnType = '2';
              }
              this.$nextTick(function () {
                this.Countdown();
              })
              this.detailsType='NOW_PRICE';
              this.sku_id=response.data.data.proInfo.sku_id;

              if(response.data.data.cutRecord.data==''){
                this.showCutList=false;
              }else{
                this.showCutList=true;
                this.cutZeroList=response.data.data.cutRecord.data;
                for(var i=0;i<response.data.data.cutRecord.data.length;i++){
                  this.$set(this.cutRecord,i,{headImg:response.data.data.cutRecord.data[i]["headImg"],time:response.data.data.cutRecord.data[i]["time"],ticketMoney:response.data.data.cutRecord.data[i]["ticketMoney"],defaultTitle:response.data.data.cutRecord.data[i]["name"]+'使用了'+response.data.data.cutRecord.data[i]["weapon"]+'砍掉了'+response.data.data.cutRecord.data[i]["price"]+'元'},);
                }
              }
              if(response.data.data.cutInfo.logic_type=='C'||response.data.data.cutInfo.logic_type=='G'){
                var cutobj={
                  shareid:this.$route.params.shareid,
                  bt_type:'CUT',
                  cut_type:this.logic_type
                };
                this.doCut(cutobj);
              }
              var obj={
                title:'我要'+this.rdMoney+'得'+':'+this.proInfo.pro_title,
                desc:'我在砍好货发现一件好货，快来帮我砍一刀，还能获取惊喜哦',
                /*link:link+'&CKTAG=mta_share.wechat_moments&CKTAG=mta_share.wechat_friend',*/
                link:newLink,
                callback:function(){
                  if(that.$store.state.getCutType==1){
                    MtaH5.clickStat("zerokan");
                    MtaH5.clickShare('wechat_friend');
                    MtaH5.clickShare('wechat_moments');
                  }else{
                    MtaH5.clickStat("threekan");
                    MtaH5.clickShare('wechat_friend');
                    MtaH5.clickShare('wechat_moments');
                  }
                  that.$nextTick(function(){
                    that.Bback();
                  })
                }
              }
              share(obj);
            }
          }.bind(this))
          .catch(function (error) {
            console.log(error);
          });
      },
      orderpay(obj){
        var _self=this;
        var value=JSON.stringify({"shareid":obj.shareid,"bt_type":obj.bt_type,"cut_type":obj.cut_type,"token":localStorage.getItem('token')}),
          key=demo(value);
        axios.post('/Home/cut/CutButtonPay',{
          value:value,
          key:key,
          ticket:this.ticket
        },config)
          .then(function(response) {
            this.$store.commit('increment',response.data.ticket);
            if(response.data.code==210){
              this.$router.push({
                path:'/newOrder',
                query:{
                  iscut:2,
                  headImg:this.proInfo.pro_img,
                  name:this.proInfo.shopName,
                  buy_num:1,
                  shopImg:this.proInfo.pro_img,
                  price_min:this.proInfo.pro_cut_price,
                  price_max:this.proInfo.pro_price,
                  title:this.proInfo.pro_title,
                  spec:this.proInfo.pro_stand,
                  type:2,
                  sku_id:this.proInfo.sku_id,
                  cutid:this.$route.params.shareid,
                  delivery_price:response.data.data.delivery_price,
                  cutMoney:response.data.data.cutMoney
                }
              })
            }else if(response.data.code==201){
              _self.showTem=true;
              _self.guanzhu=true;
              _self.guanzhuInfo=response.data.data;
            }else {
              _self.showTem=true;
              _self.newContext=response.data.msg;
              _self.test=true;
              _self.showTems=true;
            }
          }.bind(this))
          .catch(function (error) {
            console.log(error);
          });
      },
      toNewOrder(orderInfo){
      },
      Countdown(){
        var _self=this;
        if(_self.timeCount==0){
          _self.timeCount=0;
          clearInterval(_self.timerLoad);
        }else{
          clearInterval(_self.timerLoad);
          _self.timerLoad=setInterval(function(){
            _self.timeCount--;
          },1000)
        }
      },
      orderCut(){
      },
      PushCut(){
        var _self=this;
        var value=JSON.stringify({"sku_id":_self.proInfo.sku_id,"token":localStorage.getItem('token')}),
          key=demo(value);
        axios.post('/Home/cut/PushCut',{
          value:value,
          key:key,
          ticket:this.ticket
        },config)
          .then(function(response) {
            this.$store.commit('increment',response.data.ticket);
            if(response.data.code==200){
              this.$router.push('/blank/'+response.data.data.shareid)
            }
          }.bind(this))
          .catch(function (error) {
            console.log(error);
          });
      },
      goNewDetali($event){
        // var id=$event.currentTarget.getAttribute('id');
        // var skuType = this.sku_type;
        // this.$router.push('/newDetail/'+id+'/'+skuType);
        var detailsId = this.details_id;
        var detailsType = this.details_type;
        this.$router.push('/newDetail/'+detailsId+'/'+detailsType)
      },
      goHomeIndex(){
        this.$router.push('/home/index/00')
      }
    },
    mounted(){
      this.quan = true;
    },
    created(){
      this.getCutInfo();
    },
    activated(){
      //this.getCutInfo();
      MtaH5.init({
        "sid":'500594815',
        "cid":'500595819',
        "autoReport":0,
        "senseHash":0,
        "senseQuery":0,
        "performanceMonitor":0,
        "ignoreParams":[]
      });
      MtaH5.pgv();
    },
    deactivated () {
      this.$destroy(true)
    },
  }
</script>

<style scoped>

</style>
